<template>
  <div id="groupRelationalTree">
    <el-tree
      :data="treeData"
      :props="treeConfig"
      :default-expand-all="true"
    ></el-tree>
  </div>
</template>

<script>
export default {
  name: "GroupRelationalTree",
  props: ["fGroupId"],
  data() {
    return {
      groupId: null,
      treeConfig: {
        label: "name",
        children: "sonGroups"
      },
      treeData: []
    };
  }
  ,created(){
      this.groupId = this.fGroupId;
      if(this.groupId!=null){
          this.findRelationalTree();
      }
  }
  ,watch: {
    fGroupId(val) {
      this.groupId = this.fGroupId;
      this.findRelationalTree();
    }
  },
  methods: {
    findRelationalTree() {
      var that = this;
      //调用服务
      this.$axios
        .get("group/findRelationalTree", {
          params: {'id':this.groupId}
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.treeData = data.data;
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    }
  }
};
</script>